<script setup>
import HomePanel from "./HomePanel.vue";
import { findNewAPI } from "@/apis/home";
import { onMounted, ref } from "vue";

const activeIndex = ref(0); // 默认激活第一个Tab

const functionClick = (index) => {
  activeIndex.value = index;
};

const tabs = ref([
  {
    name: "功能一",
  },
  {
    name: "功能二",
  },
  {
    name: "功能三",
  },
  {
    name: "功能四",
  },
]);
</script>

<template>
  <div class="functionIntroduction">
    <div style="padding: 70px 0 50px">
      <div style="display: flex; width: fit-content; margin: 0 auto">
        <div style="font-size: 32px">课程体系</div>
        <img
          src="@/assets/images/home/sun.png"
          style="width: 34px; height: 34px"
          alt=""
        />
      </div>
      <div
        style="
          width: fit-content;
          margin: 0 auto;
          font-size: 32px;
          color: #d3d6dd;
          margin-top: -22px;
          opacity: 0.4;
        "
      >
        Curriculum system
      </div>
    </div>
    <div class="introduction_bottom">
      <img
        src="@/assets/images/home/curriculum_one.png"
        alt=""
        class="picture"
      />
      <div
        class="picture"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          color: #ffffff;
          padding: 0 24px;
          background-color: #125ead;
        "
      >
        <div
          style="
            width: 160px;
            text-align: center;
            margin-bottom: 7px;
            padding-bottom: 7px;
            border-bottom: 1px solid #ffffff;
          "
        >
          少儿编程课程
        </div>
        <div>
          聚焦少儿编程启蒙教育，注重孩子思维能力的培养。课程包含Scratch，Python，
          C++三大系列，系统进阶
        </div>
      </div>
      <img
        src="@/assets/images/home/curriculum_two.png"
        alt=""
        class="picture"
      />
      <div
        class="picture"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          color: #ffffff;
          padding: 0 24px;
          background-color: #00a0e9;
        "
      >
        <div
          style="
            width: 160px;
            text-align: center;
            margin-bottom: 7px;
            padding-bottom: 7px;
            border-bottom: 1px solid #ffffff;
          "
        >
          少儿编程课程
        </div>
        <div>
          聚焦少儿编程启蒙教育，注重孩子思维能力的培养。课程包含Scratch，Python，
          C++三大系列，系统进阶
        </div>
      </div>
      <div
        class="picture"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          color: #ffffff;
          padding: 0 24px;
          background-color: #8ec31f;
        "
      >
        <div
          style="
            width: 160px;
            text-align: center;
            margin-bottom: 7px;
            padding-bottom: 7px;
            border-bottom: 1px solid #ffffff;
          "
        >
          少儿编程课程
        </div>
        <div>
          聚焦少儿编程启蒙教育，注重孩子思维能力的培养。课程包含Scratch，Python，
          C++三大系列，系统进阶
        </div>
      </div>
      <img
        src="@/assets/images/home/curriculum_three.png"
        alt=""
        class="picture"
      />
      <div
        class="picture"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          color: #ffffff;
          padding: 0 24px;
          background-color: #fd992b;
        "
      >
        <div
          style="
            width: 160px;
            text-align: center;
            margin-bottom: 7px;
            padding-bottom: 7px;
            border-bottom: 1px solid #ffffff;
          "
        >
          少儿编程课程
        </div>
        <div>
          聚焦少儿编程启蒙教育，注重孩子思维能力的培养。课程包含Scratch，Python，
          C++三大系列，系统进阶
        </div>
      </div>
      <img
        src="@/assets/images/home/curriculum_four.png"
        alt=""
        class="picture"
      />
    </div>
  </div>
  <!-- 下面是插槽主体内容模版
  <ul class="goods-list">
    <li v-for="item in newList" :key="item.id">
      <RouterLink to="/">
        <img :src="item.picture" alt="" />
        <p class="name">{{ item.name }}</p>
        <p class="price">&yen;{{ item.price }}</p>
      </RouterLink>
    </li>
  </ul>
  -->
</template>

<style scoped lang="scss">
.functionIntroduction {
  padding-bottom: 100px;
  background-color: #fff;
  .picture {
    width: 300px;
    height: 204px;
  }
  .introduction_bottom {
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
  }
  .function {
    width: 88px;
    height: 36px;
    margin-left: 20px;
    line-height: 36px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.25);
  }
  .active-tab {
    background: linear-gradient(to bottom, #a7dffb, #1ca9eb);
  }
}
// .goods-list {
//   display: flex;
//   justify-content: space-between;
//   height: 406px;

//   li {
//     width: 306px;
//     height: 406px;

//     background: #f0f9f4;
//     transition: all .5s;

//     &:hover {
//       transform: translate3d(0, -3px, 0);
//       box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
//     }

//     img {
//       width: 306px;
//       height: 306px;
//     }

//     p {
//       font-size: 22px;
//       padding-top: 12px;
//       text-align: center;
//       text-overflow: ellipsis;
//       overflow: hidden;
//       white-space: nowrap;
//     }

//     .price {
//       color: $priceColor;
//     }
//   }
// }
</style>
